 <template>
  <div class="bx">
    <div class="scree-value">
      <input type="text" v-model="searchvalue2" placeholder="请输入名称、小区、地铁开始找房" />
      <div @click="$router.push('/MapContainer')" class="map">
        <img
          style="margin-right: 5px; width: 30px; height: 30px"
          src="../assets/map.jpg"
          alt=""
        />
        地图找房
        <div class="yy1"></div>
      </div>
      <div @click="search2(),listsearch()" class="go">
        开始找房
        <div class="yy2"></div>
      </div>
    </div>
    <div class="check">
        <div class="check1">
        <div class="a">
        <h3>区域 :</h3>
        <span :class="{'active':zf==1}" @click="zf=1">昆明</span>
        <span :class="{'active':zf==2}" @click="zf=2">上海</span>
        <span :class="{'active':zf==3}" @click="zf=3">深圳</span>
        <span :class="{'active':zf==4}" @click="zf=4">杭州</span>
        <span :class="{'active':zf==5}" @click="zf=5">南京</span>
        <span :class="{'active':zf==6}" @click="zf=6">拉萨</span>
        <span :class="{'active':zf==7}" @click="zf=7">新疆</span>
        <span :class="{'active':zf==8}" @click="zf=8">成都</span>
        <span :class="{'active':zf==9}" @click="zf=9">北京</span>
        </div>
        
        <div class="b">
        <h3>地铁线路 :</h3>
        <span :class="{'active':dt==1}" @click="dt=1">1号线</span>
        <span :class="{'active':dt==2}" @click="dt=2">2号线</span>
        <span :class="{'active':dt==3}" @click="dt=3">3号线</span>
        <span :class="{'active':dt==4}" @click="dt=4">4号线</span>
        <span :class="{'active':dt==5}" @click="dt=5">5号线</span>
        <span :class="{'active':dt==6}" @click="dt=6">6号线</span>
        <span :class="{'active':dt==7}" @click="dt=7">7号线</span>
        </div>
        <div class="c">
        <h3>出行方式 :</h3>
        <span :class="{'active':cx==1}" @click="cx=1">驾车</span>
        <span :class="{'active':cx==2}" @click="cx=2">骑行</span>
        <span :class="{'active':cx==3}" @click="cx=3">步行</span>
        <span :class="{'active':cx==4}" @click="cx=4">公交</span>
        </div>
        

      
        <div class="d">
        <h3>类型 :</h3>
        <span :class="{'active':lx==1}" @click="lx=1">不限</span>
        <span :class="{'active':lx==2}" @click="lx=2">合租</span>
        <span :class="{'active':lx==3}" @click="lx=3">整租</span>
        <span :class="{'active':lx==4}" @click="lx=4">公寓</span>
        </div>
        
        <div class="e">
        <h3>租金 :</h3>
        <span :class="{'active':zj==1}" @click="zj=1">不限</span>
        <span :class="{'active':zj==2}" @click="zj=2">1500元以下</span>
        <span :class="{'active':zj==3}" @click="zj=3">1500-2000元</span>
        <span :class="{'active':zj==4}" @click="zj=4">2000-2500元</span>
        <span :class="{'active':zj==5}" @click="zj=5">2500-3000元</span>
        </div>
        <div class="e1"> <span>价格区间:</span> <input type="text"> 
        <span>--</span> 
        <input type="text"> <span>元</span>
         <button>确定</button>
         <button style="width: 300px" @click="shuaxin()">查看全部</button>
        </div>
    </div>
    </div>

    <div v-show="!this.$store.state.searchvalue" class="value">
        <ul>
            <li @click="$router.push('/lx'),id(list.lid)" v-for="list in data" :key="list.lid">
                <div class="bb">秒杀立减{{list.price/2}}元</div>
                <img :src="list.src" alt="加载中...">
                <h3>{{list.title}}</h3>
                <div class="v1"><span>17㎡ | 5/6层</span><p>￥{{list.price}}/月</p></div>
                <p class="v3">房源距垡头站步行约245米</p>
                <div class="v2"><span>离地铁近</span> <span>非首次出租</span> <span>木棉6.0</span></div>
            </li>
        </ul>
            <div id="list">
                <img @click="list(),fy=1" src="../assets/上一页.png" alt=""/>
                <span :class="{'active':fy==1}" @click="list(),fy=1">1</span>
                <span :class="{'active':fy==2}" @click="list(6,12),fy=2">2</span>
                <img @click="list(6,12),fy=2" src="../assets/下一页.png" alt=""/>
            </div>
    </div>
     <div v-show="this.$store.state.searchvalue" class="value">
        <ul>
            <li @click="$router.push('/lx'),id(list.lid)" v-for="list in value" :key="list.lid">
                <div class="bb">秒杀立减{{list.price/2}}元</div>
                <img :src="list.src" alt="加载中...">
                <h3>{{list.title}}</h3>
                <div class="v1"><span>17㎡ | 5/6层</span><p>￥{{list.price}}/月</p></div>
                <p class="v3">房源距垡头站步行约245米</p>
                <div class="v2"><span>离地铁近</span> <span>非首次出租</span> <span>木棉6.0</span></div>
            </li>
        </ul>
    </div>



  </div>
</template>

<script>
import listX from "./ListX.vue";
export default {
    components: {listX},
  data() {
    return {
        dt:1,
        cx:1,
        lx:1,
        zj:1,
        zf:1,
        data:{},
        fy:1,
        value:'',
        searchvalue2:'',
    };
  },
  mounted(){
    if (this.$store.state.searchvalue) {//如果搜索框有值则显示发送搜索请求,否则显示全部内容
      this.listsearch()
    } else {
      this.list();
    }
  },
  methods: {
    list(sum=0,sum2=6){//分页查询
        this.axios.get(`${this.$store.state.url}/xh/user/list?sum=${sum}&sum2=${sum2}`).then(res=>{//发送请求
            this.data=res.data//得到数据赋值属性data
            console.log(res)
    })
  },
  id(lid){//点击跳转详情页
    this.$store.state.id=lid//把被点击的房屋id存到全局，方便详情页根据id发送请求
  },
   listsearch() {//搜索查询
      let value = this.$store.state.searchvalue
      this.axios.get(`${this.$store.state.url}/xh/user/sousuo?value=${value}`).then((res) => {//发送请求
          this.value = res.data; //得到数据赋值属性value
          console.log(res);
        });
    },
    search2() {
      this.$store.commit("updateValue", this.searchvalue2);//保持搜索内容到全局
    },
     shuaxin() {
      location.reload();
    }, //刷新
}}
</script>

<style lang="scss" scoped>
.bx {
  padding-top: 50px;
  height: 100%;
  width: 1252px;
  margin: 50px auto;
}
.scree-value {
  margin-top: 10px;
  display: flex;

  input {
    outline: none;
    box-sizing: border-box;
    display: block;
    padding-left: 20px;
    font-size: 15px;
    height: 50px;
    width: 411px;
    border: 0;
    box-shadow: 0 0 2px rgb(255, 145, 35);
  }

  .yy1,
  .yy2 {
    transition: all 0.5s;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 100%;
    background-color: rgba(0, 0, 0, 0.1);
  }

  .map {
    border-left: 1px solid rgb(226, 226, 226);
    cursor: pointer;
    width: 132px;
    box-sizing: border-box;
    color: rgb(123, 123, 123);
    background-color: #fff;
    font-size: 15px;
    text-align: center;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;

    &:hover .yy1 {
      top: 0;
    }
  }

  .go {
    cursor: pointer;
    position: relative;
    width: 132px;
    text-align: center;
    height: 50px;
    color: #fff;
    background-color: rgb(254, 150, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    &:hover .yy2 {
      top: 0;
    }
  }
}



.check{
.check1{
    h3{
        color: #82546e;
        font-weight: 550;
    }
    .a,.b,.c,.d,.e{
    background: rgba($color: #1f94b7, $alpha: 0.03);
    margin-top: 30px;
    display: flex;
    align-items: center;
    span{
        color: #737373;
        cursor: pointer;
        margin-left: 30px;
        &.active{
            color: rgb(253, 124, 12);
            font-weight: 600;
            }
    }
    }
    .e1{
        margin-top: 30px;
        span{
            color: #4b4b4b;
        }
        input{
            width: 100px;
            height: 30px;
            outline:none;
            font-size: 15px;
            border:1px solid#e38214;
        }
        button{
            cursor: pointer;
            margin-left: 20px;
            padding:8px 15px;
            border-radius: 3px;
            border: 0;
            color: #fff;
            background-color: rgb(243, 114, 28);
            &:active{
                background-color: rgb(254, 173, 118);
            }
        }
    }
   
}
}
.value{
    border-top:1px solid #f3a959 ;
    padding-top: 20px;
    margin-top: 50px;
    width: 100%;
    ul{
        list-style-type: none;
        display: flex;
        flex-wrap:wrap;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        li{
            cursor: pointer;
            position: relative;
            border:1px solid #dddddd ;
            border-radius: 6px;
            overflow: hidden;
            margin-top: 30px;
            box-shadow: 1px 1px 3px #c6c6c6;
            width: 370px;
            height: 430px;
             img{
              filter:brightness(0.9);
              transition: 0.5s;
                width: 100%;
                height: 270px;
            }
            &:hover img{
              filter:brightness(1);
              transform: scale(1.02);
            }
           .bb{
            padding:5px 10px;
            top: 230px;
            left: 10px;
            background-color:hsl(353, 98%, 58%);
            position: absolute;
            border-radius: 3px;
            font-size: 15px;
            z-index: 2;
            color: #fff;
           }
            h3{
                 cursor: pointer;
                margin:0 0 10px 10px;
                color:#584955;
                padding-left: 30px;
    &::after{
    content: '';
    display:block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1;
    top: 278px;
    left: 12px;
    background-image: url("../assets/map.jpeg");
    background-size:100% ;
}
                &:hover{
                    color: #ff961e;
                }
            }
            p{
                margin: 10px;
                font-size: 15px;
                color: #aeaeae;
            }
            .v1{
                display: flex;
                padding:0 10px;
                justify-content: space-between;
                span{
                    font-size: 12px;
                    color: #aeaeae;
                }
                p{
                    margin: 0;
                    font-size: 20px;
                    font-weight: bold;
                    color: #ff961e;
                }
            }
            .v2{
                display: flex;
                justify-content: space-evenly;
                span{
                    color: #ffffff;
                    font-size: 13px;
                    border-radius: 5px;
                    padding:5px 10px;
                    background-color: #ffb061;
                }
            }
        }
    }
}
.v3{
    padding-left: 30px;
    &::after{
    content: '';
    display:block;
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 1;
    top: 345px;
    left: 10px;
    background-image: url("../assets/map1.jpg");
}}
#list{
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
    img{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        filter:brightness(1.3);
        &:active{
            background-color: #ff6a00;
        }
    }
    span{
        display: flex;
        align-items: center;
        padding:5px 20px;
        line-height: 30px;
        background-color: #dddddd;
        font-size: 20px;
        &.active{
            background-color: #ff6a00;
            color: #fff;
        }
    }
}
</style>
